<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fangmm</title>
    <link rel="stylesheet" type="text/css" href="vendors/semantic/dist/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/common.css">
    <script data-main="module/main" src="vendors/requireJs/require.js"></script>
</head>
<body>
<div class ="modal-bg common" data-action = "removeModal"> 
</div>
<div class ='modal-inner'>
    <div class ="modal-img">
        <span class ="modal-remove common" data-action = "removeModal"><i class="remove icon"></i></span>
        <img src="static/img/dimental.png" class ="modal-code" data-url ="">
        <img src="static/img/codeAlert.png">
    </div>
</div>
<div>   
</div>
<div class="site">
    <header class="site-header">
        <div class="site-logo site-fix">
            <div class="site-logo__logo">
                <img src="static/img/logo.png">
                    <span class="site-logo__location">
                        <div class="ui compact selection dropdown">
                            <i class="dropdown icon"></i>
                            <div class="text">厦门</div>
                            <div class="menu">
                                <a  class="item">厦门</a>
                                <a  class="item">泉州</a>
                                <!-- <div class="item">添加</div> -->
                            </div>
                        </div>
                    </span>
            </div>
            <div class="site-logo__nav">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">我要租房</a></li>
                    <li>发布房源</li>
                    <li>下载APP</li>
                    <li>微信公众号</li>
                </ul>
            </div>
            <div class="site-logo__search">
                <div class="ui action input">
                    <input type="text" placeholder="请输入房源">
                    <button class="ui icon button">
                        <i class="search icon"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>
</div>
<hr>
<div class="site">
    <div class="site-body">
        <div class="site-breadcrumb">
            <div class="ui breadcrumb">
                <a class="section">厦门房妈妈网</a>
                <i class="right chevron icon divider"></i>
                <a class="section">厦门租房</a>
                <i class="right chevron icon divider"></i>

                <div class="section"><p class="site-h">当前房源</p></div>
            </div>
        </div>
        <div style ="width:700px ;position: relative;">
            <div class ="arrow_left">
                <i class="caret left icon"></i>
            </div>
            <div class ="arrow_right">
                <i class="caret right icon"></i>
            </div>
            <div class ="two-dimension">
                <p class ="two-dimension__title">
                  您的贴身房管家
                </p>
                <div>
                    <p class ="tel">
                        <img src="static/img/dianhua .png">
                        <span>客服热线</span>
                    </p>
                    <p class ="tel_num">
                        0592-5931113
                    </p>
                </div>
                <a class ="common" data-action = "modal">立即预约</a>
            </div>
            <!-- 轮播 -->
            <div id="playimages" class="play">
                <ul class="big_pic">
                    <li style ="opacity: 1"><img src="static/img/bg.jpg" /></li>
                    <li><img src="static/img/bg.jpg" /></li>
                    <li><img src="static/img/bg.jpg" /></li>
                    <li><img src="static/img/bg.jpg" /></li>
                    <li><img src="static/img/bg.jpg" /></li>
                    <li><img src="static/img/bg.jpg" /></li>
                </ul>
                <div class="small_pic">
                    <ul>
                        <li style="opacity: 1;" data-index =""><img src="static/img/small.jpg" /></li>
                        <li data-index =""><img src="static/img/small.jpg" /></li>
                        <li data-index =""><img src="static/img/small.jpg" /></li>
                        <li data-index =""><img src="static/img/small.jpg" /></li>
                        <li data-index =""><img src="static/img/small.jpg" /></li>
                        <li data-index =""><img src="static/img/small.jpg" /></li>
                    </ul>
                </div>
            </div>
            <div class="detail-present">
                <h1 class ="h-set">
                    <div class="list-inline">[ 整租 ] 三水 新座
                        <div class ="list-pop">
                            <img src="static/img/check.png">
                            <span class="filter-type self">自营</span>
                        </div>
                    </div>
                    <!-- [整租]塔普小区 3居室 Room1 <span class="detail-present__tag">自营</span> -->
                </h1>

                <!-- <div class="ui circular labels">
                    <a class="ui label">
                        海景房
                    </a>
                    <a class="ui label">
                        双人拼
                    </a>
                    <a class="ui label">
                        独卫
                    </a>
                </div> -->
                <div class ="detai-labels">
                    <span>海景房</span>
                    <span>双人拼</span>
                    <span>独卫</span>
                </div>
                <p class ="detai-identifier">
                    房源编号：233344533124
                </p>
                <table class="ui table detail-border__none unavarage">
                    <tbody class="detail-border__reload">
                    <tr>

                        <td>租金：<span class="brand__color">1500</span>/月</td>
                        
                    </tr>
                    <tr>

                        <td>户型:3室2厅</td>
                        <td>面积：30㎡</td>
                    </tr>
                    <tr>

                        <td>朝向：南北</td>
                        <td>装修：精装</td>
                    </tr>
                    <tr>

                        <td>楼层：8/20</td>
                        <td>入住时间：2015-6-6</td>
                    </tr>
                    <tr>

                        <td>
                            <span class ="detai-identifier__addr">
                                
                                <a href="">
                                观音山 - 塔普小区
                                </a>
                                <a href="#container">
                                <i class="marker icon brand__color"></i>
                                </a>
                                
                            </span>
                        </td>
                        <!-- <td>更新：2010-8-16</td> -->
                        <td>
                            
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            
                        </td>
                    </tr>

                    </tbody>
                </table>
                <p class="detail-border__left">
                    房间详情
                </p>
                <table class="ui table detail-border__none avarage">
                    <tbody>
                    <tr>
                        <td>房间</td>
                        <td>面积</td>
                        <td>朝向</td>
                        <td>价格</td>
                        <td>状态</td>
                        <td></td>
                    </tr>
                    <tr>
                        
                        <td>
                            
                                <div class="detail-img">
                                    <p>当前房源</p>
                                    <img src="static/img/pic.png">
                                </div>
                            
                        </td>
                        <td>
                            120㎡
                        </td>
                        <td>
                            南
                        </td>
                        <td>
                            <span class ="brand__color reset">1200元/月</span>
                        </td>
                        <td>
                            <span class ="status status_rent">
                                未租
                            </span>
                        </td>
                        <td>
                            <span class ="detail-check common" data-action="modal">我要看房</span>
                        </td>
                        
                    </tr>
                    <tr>
                        <td>
                            <div class="detail-img">
                                <p>roomA</p>
                                <img src="static/img/pic.png">
                            </div>
                        </td>
                        <td>
                            120㎡
                        </td>
                        <td>
                            南
                        </td>
                        <td>
                            <span class ="reset">1200元/月</span>
                        </td>
                        <td>
                            <span class ="status status_rented">已租</span><i class="female icon">
                        </td>
                    
                        <td>
                           
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="detail-img">
                                <p>roomA</p>
                                <img src="static/img/pic.png">
                            </div>
                        </td>
                        <td>
                            120㎡
                        </td>
                        <td>
                            南
                        </td>
                        <td>
                            <span class ="brand__color reset">1200元/月</span>   
                        </td>
                        <td>
                            <span class ="status status_rent">未租</span>
                        </td>
                        <td>
                            <a class ="detail-check__reset">查看详情</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <p class="detail-border__left">
                    房间配套
                </p>
                <div class="ui stackable five column grid detail-num">
                    <div class="column">
                        <img src="static/img/ico_device_c.png">
                        <p>床*</p>
                    </div>
                    <div class="column">
                        <img src="static/img/ico_device_yg.png">
                        <p>橱柜*</p>
                    </div>
                    <div class="column">
                        <img src="static/img/ico_device_kt.png">
                        <p>空调*</p>
                    </div>
                    <div class="column">
                        <img src="static/img/ico_device_zz.png">
                        <p>书桌*</p>
                    </div>
                </div>
                <p class="detail-border__left">
                    公共配套
                </p>
                <div class="ui stackable five column grid detail-num">
                    <div class="column">
                        <img src="static/img/ico_device_sf.png">
                        <p>沙发*</p>
                    </div>
                    <div class="column">
                        <img src="static/img/ico_device_xyj.png">
                        <p>洗衣机*</p>
                    </div>
                    <div class="column">
                        <img src="static/img/ico_device_ds.png">
                        <p>电视机*</p>
                    </div>
                    <div class="column">
                        <img src="static/img/ico_device_bx.png">
                        <p>冰箱*</p>
                    </div>
                    <div class="column">
                        <img src="static/img/ico_device_kt.png">
                        <p>空调*</p>
                    </div>
                </div>
                <!-- 记得导入你的经纬度 -->
                <p class="detail-border__left">
                    小区地图
                </p>
                <div class ="detail-map">
                    <div class ="detail-map__option">
                        <a href="javascript:void(0)" class ="on" id ="bus">交通</a>
                        <a href="javascript:void(0)">教育</a>
                        <a href="javascript:void(0)">医疗</a>
                        <a href="javascript:void(0)">商业</a>
                    </div>
                    <div style="width: 700px; height: 320px;" id="container"></div>
                    <div class ="detail-map__title"></div>
                    <div id ="map-result"></div>
                </div>
                <p class="detail-border__left">
                    猜你喜欢
                </p>
                <div class="ui stackable three column grid detail-guess">
                    <div class="column">
                        <a href="">
                            <img src="static/img/pic.png">
                            <div>
                                <p>[万达] 特房三水座</p>
                                <p class ="">3室2厅 | 120㎡ | 南北</p>
                                <p class ="brand__color">1200<small>元/月</small></p>
                            </div>
                        </a>
                    </div>
                    <div class="column">
                        <a href="">
                            <img src="static/img/pic.png">
                            <div>
                                <p>[万达] 特房三水座</p>
                                <p class ="">3室2厅 | 120㎡ | 南北</p>
                                <p class ="brand__color">1200<small>元/月</small></p>
                            </div>
                        </a>
                    </div>
                    <div class="column">
                        <a href="">
                            <img src="static/img/pic.png">
                            <div>
                                <p>[万达] 特房三水座</p>
                                <p class ="">3室2厅 | 120㎡ | 南北</p>
                                <p class ="brand__color">1200<small>元/月</small></p>
                            </div>
                        </a>
                    </div>
                </div>
                <br>
            </div>
        </div>

    </div>

</div>
<br><br>
<footer class="site-footer">
    <div class="site">
        <div class="ui stackable three column grid index-foot">
            
            <div class="column">
                <div class="ui grid link">
                    <a class="ui label" target="_blank">关于房妈妈</a><a class="ui label" target="_blank">工作机会</a><a class="ui label" target="_blank">条款与隐私</a>
                </div>
            </div>
            <div class="column">
                <div class="ui grid">
                    <div class="sixteen wide column index-contact ">
                        <p>
                          0592-5931113
                        </p>
                    </div>
                    <div class="sixteen wide column index-contact">
                       <p class ="index-contact-icon">
                        <a href="" title="support@fangmm.com" target="_blank">
                            <i class="mail outline icon"></i>
                        </a>
                        <a href="" class ="index-hover" target="_blank">
                            <img src="static/img/fangmm.png">
                            <i class="weixin icon"></i>
                        </a>
                        <a href="" target="_blank"><i class="weibo icon last"></i></a>
                       </p>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="ui grid">
                    <div class="eight wide column index-arrow-bot" id ="down">
                        <div class="ui grid index-arrow-bot__padding">
                            <div class="sixteen wide column">
                                <a href="" target="_blank">iPhone下载</a>
                            </div>
                            <div class="sixteen wide column">
                                <a href="" target="_blank">Android下载</a>
                            </div>
                        </div>
                    </div>
                    <div class="eight wide column">
                        <img src="static/img/fangmm.png">
                    </div>
                </div>
            </div>
        </div>
        <div class ="site-footer__p">
            <p>
                <strong>友情链接</strong>
            </p>
            <p>
                <a href="">厦门租房网</a>
                <a href="">厦门租房网</a>
                <a href="">厦门租房网</a>
            </p>
        </div>
    </div>   
    <p class ="site-footer__copy">
        厦门房妈妈信息技术有限公司保留一切权利 | 闽ICP备150293030 电话：0592-591113
    </p> 
</footer>
<!-- 加载地图 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?&v=1.3">
</script>
<script type="text/javascript">
   
    var map = new BMap.Map("container"); 
    map.centerAndZoom(new BMap.Point(118.178941,24.475424), 15); 

    // 你要输入经纬度
    var point = new BMap.Point(118.178941,24.475424);
    var marker = new BMap.Marker(point);
    var label = new BMap.Label('塔普社区',{"offset":new BMap.Size(9,-15)});
    label.setStyle({
        "background": "#FF4354",
        "color": "#fff",
        "padding": "6px",
        "borderRadius": "4px"
      }); 
    marker.setLabel(label);
    map.addOverlay(marker);

    $('.detail-map__option a').on('click', handle);

    var options = {
        renderOptions: {  
            map: map,
            autoViewport: false,  
            selectFirstResult: false  
        },
        onSearchComplete: function(results){ 

            if(local.getStatus() == BMAP_STATUS_SUCCESS){

                console.log(results);

                var html = [];
                var ops = [];

                for (var i = 0; i < results.getCurrentNumPois(); i++){  
                    var poi = results.getPoi(i);

                    var msg = {};
                        msg.title = poi.title;

                        if(poi.address && !poi.phoneNumber){
                            if(0 == i){

                                html.push('<div>'+
                                    '<div style ="display: inline-block;width:22px;height:25px;background:url(http://api.map.baidu.com/images/markers.png) 0px -'+
                                    i*25
                                    +'px no-repeat">'+'</div>'
                                    +'<div id ="poi'+ i +'"'+ ' class ="pos on'+ '"' +' index="'+ i +'"' +'>' + poi.title +'<br>'+ poi.address + '</div></div>')
                            }else{
                                html.push('<div>'+
                                    '<div style ="display: inline-block;width:22px;height:25px;background:url(http://api.map.baidu.com/images/markers.png) 0px -'+
                                    i*25
                                    +'px no-repeat">'+'</div>'
                                    +'<div id ="poi'+ i + '"' + ' class ="pos'+ '"' +' index="'+ i +'"' +'>' + poi.title +'<br>'+ poi.address + '</div></div>')
                            }
                            msg.address = poi.address;
                            msg.phoneNumber = '';
                        }

                        if(poi.address && poi.phoneNumber){
                            if(0 == i){
                                html.push('<div>'+
                                    '<div style ="display: inline-block;width:22px;height:25px;background:url(http://api.map.baidu.com/images/markers.png) 0px -'+
                                    i*25
                                    +'px no-repeat">'+'</div>'
                                    +'<div id ="poi'+ i +'"'+ 'class ="pos on'+ '"' +' index="'+ i +'"' +'>' + poi.title +'<br>'+ '地址:' + poi.address +'<br>'+ '电话:' + poi.phoneNumber + '</div></div>')
                            }else{
                                html.push('<div>'+
                                    '<div style ="display: inline-block;width:22px;height:25px;background:url(http://api.map.baidu.com/images/markers.png) 0px -'+
                                    i*25
                                    +'px no-repeat">'+'</div>'
                                    +'<div id ="poi'+ i +'"' +' class ="pos'+ '"' + ' index="'+ i +'"' +'>' + poi.title +'<br>'+ '地址:' + poi.address +'<br>'+ '电话:' + poi.phoneNumber + '</div></div>')
                            }
                            msg.address = poi.address;
                            msg.phoneNumber = poi.phoneNumber;
                        }

                        ops.push(msg);

                } 

                localCon.empty();
                mapTitle.empty();
                mapTitle.append(mapList);
                localCon.append(html.join(''));
                
                for (var i = 0; i < results.getCurrentNumPois(); i++){ 
                    (function(i){
                        $("#poi" + i).click(function(){
                            
                            $('.pos').removeClass('on');
                            $(this).addClass('on');

                            var opts = {  
                                    title : '<p style="font-weight:bold;color :#FF4354">'+ops[i].title+'</p>'
                                }
                            var content = '<p>'+ops[i].address+'<br>'+ops[i].phoneNumber||''+'</p>'

                            var info = new BMap.InfoWindow(content,opts); 
                            markerArr[$(this).attr("index")].openInfoWindow(info);
                        })
                    })(i) 
                } 
            } 
        },
        pageCapacity: 10 
    };
    var localCon = $('#map-result');
    var mapTitle = $('.detail-map__title');
    var local = new BMap.LocalSearch(map, options);
    var mapList;
    var markerArr = [];
    local.setMarkersSetCallback(function(pois){
        for(var i=0;i<pois.length;i++){
            markerArr[i]=pois[i].marker;
            pois[i].marker.addEventListener("infowindowopen", function(e){
           
            })  
        }
    })

    function handle(){
        // map.removeOverlay();
        var that = $(this);
            that.addClass('on');
            that.siblings().removeClass('on');
        
        var keyword = that.text();
        if(keyword =='交通'){
            keyword = "公交站";
            mapList = '<p class ="detail-border__left">'+ keyword +'</p>';
            local.searchNearby('公交',point,1000);
        }else{

            mapList = '<p class ="detail-border__left">'+ keyword +'</p>';
            local.search(keyword);
        }
    }

    map.enableScrollWheelZoom();    
    map.enableKeyboard();           
    map.enableContinuousZoom();      
    map.enableInertialDragging();  

    map.addControl(new BMap.NavigationControl()); 
    map.addControl(new BMap.ScaleControl());      
    map.addControl(new BMap.OverviewMapControl()); 
    $('.detail-map__option a').eq(0).trigger('click');


</script>
</body>
</html>